<template>
  <div>

  </div>
</template>

<script>

import * as maptalks from 'maptalks';

export default {
  name: 'ctMapLine',
  components: {},
  props: {
    lines: {
      type: Array,
      default() {
        return null;
      },
    },
  },
  data: () => ({
    defaultSymbol: {
      arrowStyle: null, // arrow-style : now we only have classic
      arrowPlacement: 'vertex-last', // arrow's placement: vertex-first, vertex-last, vertex-firstlast, point
      visible: true,
      editable: true,
      cursor: null,
      shadowBlur: 0,
      shadowColor: 'black',
      draggable: false,
      dragShadow: false, // display a shadow during dragging
      drawOnAxis: null, // force dragging stick on a axis, can be: x, y
      symbol: {
        lineColor: '#1bbc9b',
        lineWidth: 3,
      },
    },
    lineArr: []
  }),
  created() {
  },
  mounted() {
    this.reRender()
  },
  methods: {
    reRender() {
      const vue = this;
      this.$nextTick(() => {
        const {firstLayer} = this.$parent;
        let map = new Map()
        this.lines.forEach(function (line) {
          let LineString = vue.doRender(line.point, firstLayer, line.lSymbol);
          LineString.lineId = line.lineId
          LineString.lType = line.lType
          map.set(line.lineId, LineString)
          vue.lineArr.push(LineString);
        })
        this.$emit('multiLineStringCompleted', map)
      });
    },
    createMultiLineStringObj(pointOfLine, symbol) {
      let _this = this
      const arr = [];
      // eslint-disable-next-line no-plusplus
      for (let i = 0; i < pointOfLine.length - 1; i++) {
        const subArr = [];
        subArr.push(pointOfLine[i]);
        subArr.push(pointOfLine[i + 1]);
        arr.push(subArr);
      }
      let s
      if (symbol) {
        s = symbol
      } else {
        s = this.defaultSymbol
      }
      return new maptalks.MultiLineString(
        arr,
        s,
      );
    },
    doRender(pointOfLine, layer, symbol) {
      const multiLineStringObj = this.createMultiLineStringObj(pointOfLine, symbol);
      multiLineStringObj.addTo(layer);
      return multiLineStringObj
    },
  },
  watch: {
    lines: {
      immediate: false,
      handler: function (v) {
        if (this.lineArr) {
          this.lineArr.forEach(function (value) {
            value.remove()
          })
          this.lineArr = []
        }
        this.reRender()
      },
    },
  },
};
</script>

